<template>
    <div class=" title-dot" :class="{ 'nav-bar': titleType == 1, 'u-title': titleType == 0, 'title-dot': isTitleDot }">
        <h3 v-if="titleType == 0">{{ title }}</h3>
        <router-link v-else :to="titleRoute" class="title">{{ title }}</router-link>
        <div class="tabs" v-if="hasTabs">
            <template v-for="(item, index) in tabs" key="index">
                <router-link :to="{ path: item.route }" class="fc">{{ item.name }}</router-link>
                <span class="line" v-if="index < tabs.length - 1">|</span>
            </template>

        </div>
        <span class="more" v-if="isMore">
            <router-link :to="moreRoute" class="fc">更多</router-link>
            <span v-if="titleType == 0"> ></span>
            <i v-else class="right-arrow"></i>
        </span>
    </div>
</template>
<script setup>
defineProps({
    title: String,
    titleRoute: String,
    moreRoute: String,
    tabs: Array,
    hasTabs: Boolean,
    titleType: Number,
    isTitleDot: Boolean,
    isMore: Boolean
})
</script>
<style lang="scss" scoped>
.u-title {
    height: 40px;
    border-bottom: 2px solid #c20c0c;

    h3 {
        float: left;
        font-size: 24px;
        font-weight: normal;
    }

    .tabs {
        float: left;
        margin: 12px 0 0 20px;

        .fc {
            color: #666;
        }

        .line {
            margin: 0 10px;
            color: #ccc;
        }

    }

    .more {
        float: right;
        margin-top: 14px;
    }


}

.nav-bar {
    height: 33px;
    padding: 0 10px 0 34px;
    background-position: -225px -156px;
    border-bottom: 2px solid #C10D0C;

    .title {
        font-size: 20px;
        font-weight: normal;
        float: left;
        line-height: 28px;
    }

    .tabs {
        float: left;
        margin: 7px 0 0 20px;

        .fc {
            color: #666;
        }

        .line {
            margin: 0 10px;
            color: #ccc;
        }

    }

    .more {
        float: right;
        margin-top: 9px;

        .right-arrow {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-left: 4px;
            vertical-align: middle;

            background-position: 0 -240px;
        }
    }
}
</style>